<!--发布文章模块-->
<template>
  <div class="article-publish-container">
    <!-- 标题栏 -->
    <t-navbar
      title="发布文章"
      left-arrow
      @click-left="handleBack"
      class="navbar-fixed"
    >
      <template #right>
        <t-button 
          theme="primary" 
          size="small" 
          shape="round"
          @click="handleSubmit"
        >
          发布
        </t-button>
      </template>
    </t-navbar>

    <!-- 内容区 -->
    <div class="content-wrapper">
      <!-- 标题输入 -->
      <t-input
        v-model="title"
        placeholder="请输入文章标题"
        clearable
        class="title-input"
      />

      <!-- 内容输入 -->
      <t-textarea
        v-model="content"
        placeholder="请输入文章内容..."
        class="content-textarea"
        :autosize="true"  
      />

      <!-- 图片上传 -->
      <div class="upload-section">
        <div class="upload-title">添加图片（可选）</div>
        <t-upload
          v-model="images"
          multiple
          accept="image/*"
          :max="9"
          @success="handleSuccess"
          @remove="(context) => handleRemove(context.index)"
        >
          <template #default>
            <div class="upload-btn">
              <t-icon name="add" size="24px" />
              <span>添加图片</span>
            </div>
          </template>
          <template #file="{ file, index }">
            <div class="upload-preview">
              <img :src="createObjectURL(file)" class="preview-image" />
              <div class="remove-btn" @click.stop="handleRemove(index)">
                <t-icon name="close" size="16px" />
              </div>
            </div>
          </template>
        </t-upload>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { SuccessContext } from 'tdesign-mobile-vue/es/upload/type';

// 添加URL工具函数
const createObjectURL = (file: File) => {
  return URL.createObjectURL(file);
};
import { 
  Navbar as TNavbar,
  Button as TButton,
  Input as TInput,
  Textarea as TTextarea,
  Upload as TUpload,
  Toast,
  Icon as TIcon
} from 'tdesign-mobile-vue';

const title = ref('');
const content = ref('');
const images = ref<File[]>([]);

const handleSuccess = (context: SuccessContext) => {
  // 将context.files改为context.file并添加类型断言
  images.value = [...images.value, context.file as unknown as File];
};

const handleRemove = (index: number) => {
  images.value.splice(index, 1);
};

const handleSubmit = () => {
  if (!title.value.trim()) {
    Toast('请输入文章标题');
    return;
  }
  
  if (!content.value.trim()) {
    Toast('请输入文章内容');
    return;
  }
  
  // 这里添加提交逻辑
  console.log({
    title: title.value,
    content: content.value,
    images: images.value
  });
  
  Toast('发布成功');
  // 模拟提交后清空表单
  title.value = '';
  content.value = '';
  images.value = [];
};

const handleBack = () => {
  history.back();
};
</script>

<style scoped>
.article-publish-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f8fa;
}

/* 固定标题栏 */
.navbar-fixed {
  --td-navbar-height: 48px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--td-brand-color);
}

.navbar-fixed :deep(.t-navbar__title) {
  color: white;
}

/* 内容容器 */
.content-wrapper {
  margin-top: 48px;
  padding: 16px;
  flex: 1;
  overflow-y: auto;
}

/* 标题输入 */
.title-input {
  margin-bottom: 16px;
  background-color: white;
  border-radius: 8px;
  padding: 12px 16px;
}

.title-input :deep(.t-input__inner) {
  font-size: 18px;
  font-weight: 500;
}

/* 内容输入 */
.content-textarea {
  margin-bottom: 16px;
  background-color: white;
  border-radius: 8px;
  padding: 16px;
}

.content-textarea :deep(.t-textarea__inner) {
  min-height: 200px;
  font-size: 16px;
  line-height: 1.6;
}

/* 上传区域 */
.upload-section {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
}

.upload-title {
  font-size: 14px;
  color: var(--td-gray-color-8);
  margin-bottom: 12px;
}

.upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 1px dashed var(--td-gray-color-3);
  border-radius: 4px;
  color: var(--td-gray-color-6);
  font-size: 12px;
}

.upload-preview {
  position: relative;
  width: 80px;
  height: 80px;
  margin-right: 8px;
  margin-bottom: 8px;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.remove-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  background-color: var(--td-gray-color-10);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* 上传图片列表 */
:deep(.t-upload__dragger) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
</style>